<include file="/public/header" />
<link href="__STATICADMIN__/module/formDesign/formdesign.css" rel="stylesheet" type="text/css" />
<div class="layui-fluid">
    <form class="layui-form layui-card">
        <input type="text" name="curd_id" value="{$data.id}" hidden="">
        <div class="layui-card-header">表单设计</div>
        <div class="layui-card-body">
            <div class="layui-row layui-col-space30">
                <div class="layui-col-md2">
                    <div class="layui-tab layui-tab-brief">
                        <ul class="layui-tab-title">
                            <li class="layui-this">{:__('表单组件')}</ol>
                            <li>{:__('表单模板')}</ol>
                        </ul>
                        <div class="layui-tab-content" id="layui-form-attribute">
                            <div class="layui-tab-item layui-form layui-show">
                                <div class="component">
                                    <div class="head">表单组件</div>
                                    <div class="component-group" id="sort_1">
                                        <ol data-tag="input">
                                            <div class="icon"><i class="layui-icon layui-icon-layer"></i></div>
                                            <div class="name">单行输入</div>
                                        </ol>
                                        <ol data-tag="textarea">
                                            <div class="icon"><i class="layui-icon layui-icon-align-left"></i></div>
                                            <div class="name">多行输入</div>
                                        </ol>
                                        <ol data-tag="radio">
                                            <div class="icon"><i class="layui-icon layui-icon-radio"></i></div>
                                            <div class="name">单选框</div>
                                        </ol>
                                        <ol data-tag="checkbox">
                                            <div class="icon"><i class="layui-icon layui-icon-table"></i></div>
                                            <div class="name">多选框</div>
                                        </ol>
                                        <ol data-tag="select">
                                            <div class="icon"><i class="layui-icon layui-icon-print"></i></div>
                                            <div class="name">下拉框</div>
                                        </ol>
                                        <ol data-tag="date">
                                            <div class="icon"><i class="layui-icon layui-icon-time"></i></div>
                                            <div class="name">日期组件</div>
                                        </ol>
                                        <ol data-tag="colorpicker">
                                            <div class="icon"><i class="layui-icon layui-icon-theme"></i></div>
                                            <div class="name">颜色选择器</div>
                                        </ol>
                                        <ol data-tag="slider">
                                            <div class="icon"><i class="layui-icon layui-icon-slider"></i></div>
                                            <div class="name">滑块</div>
                                        </ol>
                                        <ol data-tag="rate">
                                            <div class="icon"><i class="layui-icon layui-icon-rate-solid"></i></div>
                                            <div class="name">评分</div>
                                        </ol>
                                        <ol data-tag="switch">
                                            <div class="icon"><i class="layui-icon layui-icon-switch">
                                                    <k></k>
                                                </i></div>
                                            <div class="name">开关</div>
                                        </ol>
                                        <ol data-tag="cascader">
                                            <div class="icon"><i class="layui-icon layui-icon-cols"></i></div>
                                            <div class="name">级联选择器</div>
                                        </ol>
                                        <ol data-tag="editor">
                                            <div class="icon"><i class="layui-icon layui-icon-form"></i></div>
                                            <div class="name">富文本</div>
                                        </ol>
                                        <ol data-tag="upload">
                                            <div class="icon"><i class="layui-icon layui-icon-upload"></i></div>
                                            <div class="name">文件上传</div>
                                        </ol>
                                        <ol data-tag="tags">
                                            <div class="icon"><i class="layui-icon fa-instagram"></i></div>
                                            <div class="name">标签选择器</div>
                                        </ol>
                                        <ol data-tag="json">
                                            <div class="icon"><i class="layui-icon fa-bars"></i></div>
                                            <div class="name">JSON组件</div>
                                        </ol>
                                    </div>
                                </div>

                                <div class="component">
                                    <div class="head">辅助组件</div>
                                    <div class="component-group" id="sort_2">
                                        <ol data-tag="tips">
                                            <div class="icon"><i class="layui-icon layui-icon-tips"></i></div>
                                            <div class="name">提示</div>
                                        </ol>
                                        <ol data-tag="button">
                                            <div class="icon"><i class="layui-icon layui-icon-layer"></i></div>
                                            <div class="name">按钮</div>
                                        </ol>
                                        <ol data-tag="note">
                                            <div class="icon"><i class="layui-icon layui-icon-note"></i></div>
                                            <div class="name">便签</div>
                                        </ol>
                                        <ol data-tag="subtraction">
                                            <div class="icon"><i class="layui-icon layui-icon-subtraction"></i></div>
                                            <div class="name">分割线</div>
                                        </ol>
                                    </div>
                                </div>
                                <div class="component">
                                    <div class="head">布局组件</div>
                                    <div class="component-group" id="sort_3">
                                        <ol data-tag="tab">
                                            <div class="icon"><i class="layui-icon layui-icon-tabs smallfont"></i></div>
                                            <div class="name">TAB选项卡</div>
                                        </ol>
                                        <ol data-tag="grid">
                                            <div class="icon"><i class="layui-icon layui-icon-layouts"></i></div>
                                            <div class="name">栅格</div>
                                        </ol>
                                        <ol data-tag="space">
                                            <div class="icon"><i class="layui-icon layui-icon-more"></i></div>
                                            <div class="name">间距</div>
                                        </ol>
                                    </div>
                                </div>
                            </div>
                            <!-- // 加载远程表单模板 -->
                            <div id="layui-form-template" class="layui-tab-item">
                                <div id="item-list" class="item-list"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md8">
                    <div class="layui-card-header">
                        <div class="fr">
                            <button type="button" class="layui-btn layui-btn-sm layui-btn-export"><i
                                    class="layui-icon layui-icon-export"></i>导出</button>
                            <button type="button" class="layui-btn layui-btn-sm layui-btn-import"><i
                                    class="layui-icon layui-icon-layer"></i>导入</button>
                            <button type="button" class="layui-btn layui-btn-sm layui-btn-component"> <i
                                    class="layui-icon layui-icon-component"></i> 预览</button>
                            <button type="button" class="layui-btn layui-btn-sm layui-btn-danger layui-form-clear"><i
                                    class="layui-icon layui-icon-delete"></i>清空</button>
                        </div>
                    </div>
                    <!-- // 表单设计区域 -->
                    <div id="formBuilder" style="width: 100%"></div>
                    <!-- // 表单隐藏域 -->
                    <textarea id="formDesign" name="formDesign" hidden>{$data.formDesign}</textarea>
                </div>
                <div class="layui-col-md2" style="padding-top: 0;">
                    <div class="layui-tab layui-tab-brief">
                        <ul class="layui-tab-title">
                            <li class="layui-this">{:__('组件属性')}</ol>
                            <li>{:__('表单属性')}</ol>
                        </ul>

                        <div class="layui-tab-content" id="layui-form-attribute">
                            <div class="layui-tab-item layui-form layui-show" id="Propertie" lay-filter="Propertie">
                            </div>
                            <div class="layui-tab-item">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">
                                        <font color="red">*</font>{:__('表单ID')}
                                    </label>
                                    <div class="layui-input-inline">
                                        <input type="text" id="formName" name="formName" class="layui-input"
                                            value="{$data.formName|default='form'}" placeholder="请输入">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">{:__('表单类型')}</label>
                                    <div class="layui-input-inline">
                                        <input type="radio" name="formType" title="弹窗" <eq name="$data['formType']"
                                            value="1">checked="" </eq> value="1">
                                        <input type="radio" name="formType" title="内置" <eq name="$data['formType']"
                                            value="0">checked="" </eq> value="0" >
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <label class="layui-form-label">{:__('表单宽高')}</label>
                                    <div class="layui-input-inline">
                                        <input type="text" id="formWidth" name="width"
                                            style="width: 70px;display: inline-block;" class="layui-input"
                                            value="{$data.width|default='1100px'}" placeholder="宽度">
                                        <em> - </em>
                                        <input type="text" id="formHeight" name="height"
                                            style="width:70px;display: inline-block;" class="layui-input"
                                            value="{$data.height|default='750px'}" placeholder="高度">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-footer layui-form-footer">
            <button class="layui-btn layui-btn-primary" type="button" sa-event="closeDialog">{:__('取消')}</button>
            <button class="layui-btn" lay-filter="submitIframe" type="button" lay-submit>{:__('提交')}</button>
        </div>
    </form>
</div>

<div class="layui-htmlview" style="display: none;">
    <textarea id="json-code"></textarea>
    <div class="layui-htmlbtn">
        <button id="copy-code" class="layui-btn layui-hide">复制代码</button>
        <button id="import-code" class="layui-btn layui-hide">导入数据</button>
    </div>
</div>

<include file="/public/footer" />
<script src="__STATICJS__tinymce/tinymce.min.js?v={:config('app.version')}"></script>
<script src="__STATICJS__Sortable/Sortable.js?v={:config('app.version')}"></script>
<script>
    layui.use(['jquery', 'flow', 'formDesign'], function () {
        var $ = layui.jquery;

        var formDesign = layui.formDesign;

        formDesign.render({
            elem: '#formBuilder'
            , eval: '#formDesign'
        });

        layui.flow.load({
            elem: '#item-list'
            , done: function (page, next) {
                var list = [];
                $.get('//api.swiftadmin.net/form/?page=' + page, function (res) {
                    layui.each(res.data, function (index, item) {
                        list.push(item);
                    });
                    next(list.join(''), page < res.total);
                })
            }
        });
    })
</script>